<template>
  <div>
    <el-card  style="margin-bottom: 20px;border-radius: 10px">
      <el-row>
        <el-col :span="6">
          <el-input v-model="option.username"
          >
            <template slot="prepend">用户名</template>
          </el-input>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-input v-model="option.address"
          >
            <template slot="prepend">地址</template>
          </el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-select v-model="option.role"
                     placeholder="请选择用户角色"
                     style="width: 100%;">
            <el-option label="管理员" :value="0" />
            <el-option label="普通用户" :value="1" />
          </el-select>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button-group style="width: 100%">
            <el-button type="success" style="width: 50%" @click="search"><i class="el-icon-search"></i></el-button>
            <el-button style="width: 50%" @click="reLoad"><i class="el-icon-refresh"></i></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="userList"
              style=" border-radius:13px 13px 0px 0px;"
              border
              :header-row-class-name="headerClass"
              max-height="600"
    >
      <el-table-column label="用户编号" prop="user_id" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="角色">
        <template slot-scope="scope">
          {{scope.row.role===0?'管理员':'普通用户'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)" size="mini">编辑信息</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="border-radius:0px 0px 13px 13px;border-top-width: 0px;background-color: #f1f2f6;" :body-style="{ padding: '10px' }">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="copyList.length"
      >
      </el-pagination>
    </el-card>

<!--    @size-change="handleSizeChange"-->
<!--    @current-change="handleCurrentChange"-->
<!--    :current-page="currentPage4"-->


    <!--修改-->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisibleEdit" append-to-body>
      <el-form v-model="formData" label-position="right" label-width="100px">
        <el-form-item label="用户编号" prop="user_id">
          <el-input v-model="formData.user_id"/>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.role">
            <el-option label="管理员" :value="0" />
            <el-option label="普通用户" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <AreaData @change="test" width="100%"></AreaData>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit=false">取消</el-button>
        <el-button type="primary" @click="handleEdit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deleteUser, getAllUser, getUserById, updateUser} from "@/api/user";
import AreaData from "@/components/AreaData";

export default {
  name: "index",
  components: {AreaData},
  data() {
    return {
      searchIs:true,
      userList:[],
      page:{
        size:10,
        index:1
      },
      copyList:[],
      column:{address:'地址',user_id:'用户编号',username:'用户名',phone:'手机号'},
      formData:{},
      dialogFormVisibleEdit: false,
      option:{
        username:'',
        address:'',
        role:'',
      }
    }
  },
  created() {
    this.getAllUser()
    this.pageHelper()
  },
  methods:{
    handleSizeChange(val) {
      this.page.size = val
      this.pageHelper()
    },
    pageHelper() {
      const index = this.page.index
      const size = this.page.size
      this.userList = this.copyList.slice(size*(index-1),size*index)
    },
    handleCurrentChange(val) {
      this.page.index = val
      this.pageHelper()
    },
    reLoad() {
      this.getAllUser()
      this.option = {
        username:'',
        address:'',
        role:'',
      }
    },
    search() {
      const deleteList = (array,userId) =>{
        for (const a in array) {
          if (array[a].user_id === userId) {
            return a
          }
        }
      }

      const username = this.option.username
      const address = this.option.address
      const role = this.option.role
      const users = []
      this.copyList.forEach((user)=>{
        users.push(user)
      })
      this.copyList.forEach((user)=>{
        if (role !== '') {
          if (user.role !== role) {
            users.splice(deleteList(users,user.user_id),1)
          }
        }
        if (username !== '') {
          if (user.username.indexOf(username) === -1) {
            users.splice(deleteList(users,user.user_id),1)
          }
        }
        if (address !== '') {
          if (user.address.indexOf(address) === -1) {
            users.splice(deleteList(users,user.user_id),1)
          }
        }
      })
      this.userList = users
    },
    headerClass() {
      return 'table-header'
    },
    getAllUser() {
      getAllUser().then(response=>{
        this.userList = response.data.slice(0,10)
        this.copyList = response.data
      })
    },
    handleUpdate(row) {
      this.dialogFormVisibleEdit = true
      getUserById(row.user_id).then((res) => {
        this.formData = res.data[0]
      })
    },
    handleEdit(){
      updateUser(this.formData).then((res) => {
        if (res.code === 200) {
          this.dialogFormVisibleEdit = false
          this.$message.success(res.msg)
        }else {
          this.$message.error("修改失败")
        }
      }).finally(() => {
        this.getAllUser()
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除此用户', '提示', { type: 'info' }).then(() => {
        deleteUser(row.user_id).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.message)
          }
        }).finally(() => {
          this.getAllUser()
        })
      }).catch(() => {
        this.$message.info('取消删除操作')
      })
    },
    test(e){
      this.formData.address = e
    }
  }
}
</script>

<style scoped>
.el-table>>>.table-header th{
  background-color: #589ff8;
  color: #ffffff;
}
</style>
